<template>
    <div>

        <el-input v-model="input" placeholder="请输入内容" style="width:220px"></el-input>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button v-on="open">添加</el-button>
 
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="歌曲名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="作者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="时长">
      </el-table-column>
    </el-table>


<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="用户名" :label-width="formLabelWidth">
    
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth">
    
    
      <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>

    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">

    <template>
  <el-radio v-model="form.sex" label="1">男</el-radio>
  <el-radio v-model="form.sex" label="2">女</el-radio>
</template>
    
    </el-form-item>
<el-form-item label="爱好" :label-width="formLabelWidth">
    <template>
  <el-checkbox-group v-model="form.hobby">
    <el-checkbox label="足球 A"></el-checkbox>
    <el-checkbox label="篮球 B"></el-checkbox>
    <el-checkbox label="品牌球 C"></el-checkbox>
    </el-checkbox-group>
</template>
     
    </el-form-item>
   下拉
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  

 <el-form-item label="介绍" :label-width="formLabelWidth">
    
    <el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="form.intro">
</el-input>

  </el-form-item>





    

    
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>






 
 </div>
</template>

<script>
export default {
    
    data() {
        return {
             form: {
          name: '',
          password:'',
          sex:'',
          hobby:'',
          intro:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
            dialogFormVisible:false,
            input:"",
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
      ,

    
    setup() {
        
    },
}
</script>

